<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表白墙</title>
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all" />
    <style>
        /* 为了区分效果 */
        div[carousel-item]>*{text-align: center; line-height: 280px; color: #fff;}
        div[carousel-item]>*:nth-child(2n){background-color: #5FB878;}
        div[carousel-item]>*:nth-child(2n+1){background-color: #009688;}
        #test2 div[carousel-item]>*{line-height: 120px;}
    </style>
</head>
<body>

<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div>《牡丹吟》</div>
        <div>牡丹花品冠群芳</div>
        <div>况是期间更有王</div>
        <div>四色变而成百色</div>
        <div>百般颜色百般香</div>
        <div>我爱，盛丹丹</div>
    </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->

<script type="text/javascript" src="../../js/layui/layui.js"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
</body>
</html>